<template>
  <div class="pageRR">
    <header>
      <div class="headertop">headerTop</div>
      <div class="headermain"></div>
    </header>
    <div class="tabbox">
      <div class="itemtab" @click="handleScrollTo('box1')"><a>1</a></div>
      <div class="itemtab" @click="handleScrollTo('box2')"><a>2</a></div>
      <div class="itemtab" @click="handleScrollTo('box3')"><a>3</a></div>
      <div class="itemtab" @click="handleScrollTo('box4')"><a>4</a></div>
    </div>

    <div class="content">
      <div id="box1" class="box"><h2>111111</h2></div>
      <div id="box2" class="box"><h2>222222</h2></div>
      <div id="box3" class="box"><h2>33333</h2></div>
      <div id="box4" class="box"><h2>444444</h2></div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted } from 'vue';
const handleScrollTo = (id) => {
  // if (id === 'box1') return;

  nextTick(() => {
    // document.body.scrollTop = document.documentElement.scrollTop = 500;
    setTop(id);
  });
};

function setTop(id) {
  let domEl = document.querySelectorAll('#' + id);
  domEl[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
}

onMounted(() => {});
</script>

<style lang="scss" scoped>
.pageRR {
  .headertop {
    background-color: #2c2c2c;
    height: 80px;
  }
  .headermain {
    height: 200px;
    background-color: #f40;
  }
  .tabbox {
    height: 100px;
    display: flex;
    // justify-content: space-between;
    background-color: gold;
    position: sticky;
    top: 0;
    .itemtab {
      height: 100px;
      text-align: center;
      line-height: 100px;
      color: #fff;
      font-weight: 700;
      background-color: #000;
      flex: 1;
      border-right: 2px solid #fff;
      cursor: pointer;
    }
    :last-child {
      border-right: 2px solid #000;
    }
  }

  .content {
    .box {
      height: 500px;
      background-color: green;
    }
    #box2 {
      background-color: #f40;
    }
    #box3 {
      background-color: blue;
    }
    #box4 {
      background-color: pink;
    }
  }
}
</style>
